<template>
	<div>
		<h3 style="margin-bottom: 20px;">外出申请审批</h3>
		<el-row :gutter="12" type="flex" justify="start" align="middle">
			<el-col :span="4">
			</el-col>
		    <el-col :span="2">
				客户id：
			</el-col>
			<el-col :span="4">
				<el-input
				    v-model="id"
				    class="w-50 m-2"
				    placeholder="输入客户姓名"
				    :prefix-icon="User"
				/>
			</el-col>
		    <el-col :span="2">
				状态：
			</el-col>
			<el-col :span="4">
				    <el-select
				        v-model="state"
				        placeholder="输入审批状态"
				        clearable
				    >
				        <el-option label="未审批" value="未审批" />
				        <el-option label="已审批" value="已审批" />
				    </el-select>
			</el-col>
		    <el-col :span="4">
				<el-button @click="getPage()">查询</el-button>
			</el-col>
		</el-row>
		<hr>
		<el-table v-if="state === '未审批'" :data="pageInfo.tableData" style="width: 100%">
			<el-table-column prop="id" label="编号"/>
		    <el-table-column prop="customerId" label="客户id"/>
		    <el-table-column prop="reason" label="外出原因"/>
		    <el-table-column prop="outTime" label="外出时间" />
			<el-table-column prop="backTimePre" label="预计回院时间" />
			<el-table-column label="操作" width="120">
			    <template #default="scope">
					<el-icon color="#3CB371" @click="outCheck()"><Check /></el-icon>
			        <el-icon color="#B22222" @click="outNo()"><Close /></el-icon>
			    </template>
			</el-table-column>
		</el-table>
		
		<el-table v-if="state === '已审批'" :data="pageInfo.tableData" style="width: 100%">
			<el-table-column prop="id" label="编号"/>
		    <el-table-column prop="customerId" label="客户id"/>
			<el-table-column prop="reviewStatus" label="审核情况"/>
			<el-table-column prop="reviewTime" label="审核时间"/>
			<el-table-column prop="reviewName" label="审批人"/>
		    <el-table-column prop="reason" label="外出原因"/>
		    <el-table-column prop="outTime" label="外出时间" />
			<el-table-column prop="backTimePre" label="预计回院时间" />
			<el-table-column prop="state" label="审核状态" />
			<el-table-column prop="backTimeReal" label="回院时间" />
		</el-table>
		<hr>
		<el-pagination
		    v-model:current-page="pageInfo.currentPage4"
		    v-model:page-size="pageInfo.pageSize4"
		    :page-sizes="[2, 3, 5, 7]"
		    :small="pageInfo.small"
		    :disabled="pageInfo.disabled"
		    :background="pageInfo.background"
		    layout="total, sizes, prev, pager, next, jumper"
		    :total="pageInfo.total"
		    @size-change="handleSizeChange"
		    @current-change="handleCurrentChange"
		/>
	</div>
</template>

<script setup>
import axios from 'axios'
import { onMounted,reactive,ref,watch  } from 'vue';
import { ElMessage,ElMessageBox } from 'element-plus';
import { Calendar, Search } from '@element-plus/icons-vue'
import { getOutPage } from "@/utils/requests/outApprove.js"
//查询
const id = ref("");
const state=ref("未审批");
const pageInfo = reactive({
	tableData:[],
	small:true,
	background:true,
	total:0,
	disabled:false,
	currentPage4:1,
	pageSize4:3
});
const getPage = ()=>{
	if(state == null || state == "undefined" || state == ''){
		ElMessage.warning("请选择审核状态")
	}else{
		getOutPage(pageInfo,id.value,state.value)
		        .then((res)=>{
		            pageInfo.tableData=res.data.records;
					pageInfo.total = res.data.total;
		            console.log(pageInfo.tableData);
		            
			})
		    .catch((error)=>{
		        console.log(error);
		})	
	}
}
const handleSizeChange = (nowSize) => {
  pageInfo.pageSize4=nowSize;
  getPage();
};
const handleCurrentChange = (currentPage) => {
  pageInfo.currentPage4=currentPage;
  getPage();
};
onMounted(()=>{
	getPage();
})
</script>

<style>
</style>